<div class="main" xmlns:th="http://www.thymeleaf.org">
    <div class="books-pane">
        <table class="layui-hide" id="test" lay-filter="test"></table>
        <script type="text/html" id="barDemo">
            <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
            <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
        </script>

        <!--工具栏模板：-->
        <div type="text/html" id="toolbar" style="display: none;">
            <form name="search" class="layui-form layui-form-pane" lay-size="lg" style="margin-top:0;text-align: left;height: 36px">
                <div class="layui-form-item">
                    <div class="layui-header-title fl">
                        <div class="layui-inline">
                            <h2>用户列表</h2>
                        </div>
                    </div>
                    <div class="layui-header-quick-btn fl">
                        <div class="layui-inline" lay-event="add" title="创建新用户"><i class="layui-icon layui-icon-add-1"></i></div>
                        <div class="layui-inline" lay-event="update" title="修改用户信息"><i class="layui-icon layui-icon-edit"></i></div>
                        <div class="layui-inline" lay-event="delete" title="删除用户"><i class="layui-icon layui-icon-delete"></i></div>
                    </div>
                    <div class="layui-header-search fr">
                        <div class="layui-inline">
                            <div class="layui-input-inline">
                                <select name="field">
                                    <option value="username">用户名</option>
                                    <option value="nickname">姓名</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <div class="layui-input-inline width120">
                                <input placeholder="宁可少字, 不要错字" type="text" name="value" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <button class="layui-btn" lay-submit lay-filter="*">搜 索</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>

</div>
<script>
    layui.use(['element', 'table', 'form', 'jquery'], function () {
        var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
        var table = layui.table;
        var form = layui.form;
        var $ = layui.jquery;

        table.render({
            elem: '#test'
            , id: "test"
            , url: './user/search'
            , toolbar: '#toolbar'
            , title: '查询书籍'
            , cols: [
                [
                    {type: 'checkbox', fixed: 'left'},
                    {field: 'id', width: 80, title: 'ID', sort: true},
                    {field: 'username', width: 150, title: '书名'},
                    {field: 'username', width: 150, title: '书名'},
                    {field: 'username', width: 150, title: '书名'},
                    {field: 'username', width: 150, title: '书名'},
                    {field: 'username', width: 150, title: '书名'},
                    {field: 'username', width: 150, title: '书名'},
                    {field: 'username', width: 150, title: '书名'},
                    {field: 'username', width: 150, title: '书名'},
                    {field: 'username', width: 150, title: '书名'},
                    {field: 'username', width: 150, title: '书名'},
                    {field: 'username', width: 150, title: '书名'},
                    {fixed: 'right', width: 165, align:'center', toolbar: '#barDemo'},
                ]
            ]
            , page: true
        });

        //监听头工具栏事件
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id)
                ,data = checkStatus.data; //获取选中的数据
            switch(obj.event){
                case 'add':
                    reqRawHtml("/user/add");
                    break;
                case 'update':
                    if(data.length === 0){
                        layer.msg('请选择一行');
                    } else if(data.length > 1){
                        layer.msg('只能同时编辑一个');
                    } else {
                        layer.alert('编辑 [id]：'+ checkStatus.data[0].id);
                    }
                    break;
                case 'delete':
                    if(data.length === 0){
                        layer.msg('请选择一行');
                    } else {
                        layer.msg('删除');
                    }
                    break;
            };
        });

        //监听行工具事件
        table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                ,layEvent = obj.event; //获得 lay-event 对应的值
            if(layEvent === 'detail'){
                layer.msg('查看操作');
            } else if(layEvent === 'del'){
                layer.confirm('真的删除行么', function(index){
                    obj.del(); //删除对应行（tr）的DOM结构
                    layer.close(index);
                    //向服务端发送删除指令
                });
            } else if(layEvent === 'edit'){
                layer.msg('编辑操作');
            }
        });

        form.on('submit(*)', function (data) {
            console.log(data.field);
            table.reload('test', {
                url: './user/search',
                where: {field:data.field.field,value:data.field.value} //设定异步数据接口的额外参数
                //,height: 300
                ,done: function(res, curr, count){
                    //this.where={};
                    var fieldName = $("select[name=field] option[value="+data.field.field+"]").eq(0).text();
                    $(".layui-select-title .layui-unselect").val(fieldName);
                    $("select[name=field]").val(data.field.field);
                    $("input[name=value]").val(data.field.value);
                    //不清空，有问题：搜索条件会保留
                    //清空，  有问题：分页的时候没有搜索条件了,分页会受到影响
                }
            });
            return false
        });
    });
</script>
